﻿@model TelerikConnect.Web.ViewModels.UserProfileViewModel

@{
    ViewBag.Title = Model.FirstName + " " + Model.LastName;
}
<div class="content-wrapper">
    <h1>@string.Format("{0} {1}", Model.FirstName, Model.LastName)</h1>
    <div id="content-left">
        <img src="@Model.Avatar" id="avatar" alt="@Model.UserName" title="@Model.UserName" />

        <a href="/Upload/Async" class="k-button">Upload New Avatar</a>
        <a href="/Account/Profile/@Model.UserName" class="k-button">View Profile</a>
    </div>
    <div id="content-right">
        <h2>Area of expertise:</h2>
        <p>@Model.AreaOfExpertise</p>

        <span id="update-area-button" class="k-button">Update Area</span>

        <div>
            <h2>About</h2>
            <p id="About">
                @Model.About
            </p>
            <span data-id="About" class="k-button text-update">Update</span>
        </div>

        <div>
            <h2>Statement</h2>
            <p id="Statement">
                @Model.Statement
            </p>
            <span data-id="Statement" class="k-button text-update">Update</span>
        </div>


        <h2>Skills</h2>
        <div id="skills">
            @foreach (var skill in Model.Skills)
            {
                <p>@skill.Name</p>
            }
            <span id="add-skill" class="k-button">Add skill</span>
        </div>

        <a href="/Account/Manage" class="k-button">Change password</a>
    </div>
</div>

<script>
    var updatedFieldId;

    function onClose() {
        $.ajax(
            {
                url: '/Account/Get' + updatedFieldId,
                dataType: "json",
                success: function (result) {
                    $("#" + updatedFieldId).html(result.data);
                },
                error: function (e) {
                    console.log(e)
                }
            }
            );
    }

    $("#update-area-button").click(function () {
        var data = '<iframe frameborder = "0" width="480" src="/Account/UpdateArea" ></iframe>';
        var kendoWindow = $("#window").data("kendoWindow");
        kendoWindow.content(data);

        kendoWindow.center();
        kendoWindow.open();
    });

    $(".text-update").click(function (e) {
        var kendoWindow = $("#window").data("kendoWindow");
        var self = $(this);
        var action = self.attr("data-id");
        updatedFieldId = action;

        var data = '<iframe frameborder = "0" width="480" src="/Account/' + updatedFieldId + 'Update"></iframe>'

        kendoWindow.content(data);

        kendoWindow.center();
        kendoWindow.open();
    });

    $("#add-skill").click(function (e) {
        var data = '<iframe frameborder = "0" width="480" src="/Skill/Add" ></iframe>';
        var kendoWindow = $("#window").data("kendoWindow");
        kendoWindow.content(data);

        kendoWindow.center();
        kendoWindow.open();
    });
</script>
